<template>
	<el-dialog width="1100px" title="二要素验证" :visible.sync="dialogVisible" :close-on-click-modal="false">

		<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
			<el-form-item prop="name" label="基本信息" :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]">
				<el-input v-model="dynamicValidateForm.name" placeholder="请输入姓名" />
				<el-input v-model="dynamicValidateForm.mobile" placeholder="请输入手机号"></el-input>
				<el-button @click="search(9)">查询</el-button>
				<el-tag style="margin-left: 10px;width:70px;text-align: center;font-size: 14px;"
					:type="result == '一致' ? 'success' : 'danger'">{{ result }}</el-tag>
			</el-form-item>
			<el-form-item v-for="(domain, index) in dynamicValidateForm.domains" :label="'基本信息' + ++index" :key="domain.key">
				<el-input v-model="domain.value" placeholder="请输入姓名"></el-input>
				<el-input v-model="domain.value1" placeholder="请输入手机号"></el-input>
				<el-button @click="search(index)">查询</el-button>
				<el-button @click.prevent="removeDomain(domain)">删除</el-button>
				<el-tag style="margin-left: 10px;width:70px;text-align: center;font-size: 14px;"
					:type="result == '一致' ? 'success' : 'danger'">{{ domain.result }}</el-tag>
			</el-form-item>
			<el-form-item>
				<el-button @click="addDomain">新增信息</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column prop="cert_name" label="姓名" width="">
			</el-table-column>
			<el-table-column prop="mobile" label="手机号" width="">
				<template slot-scope="scope">
					{{ encryptPhoneNumber(scope.row.mobile) }}
				</template>
			</el-table-column>
			<el-table-column prop="agree_text" label="查询结果">
				<template slot-scope="scope">
					<el-tag style="margin-left: 10px;width:70px;text-align: center;font-size: 14px;"
						:type="scope.row.agree_text == '一致' ? 'success' : 'danger'">{{ scope.row.agree_text }}</el-tag>
				</template>
			</el-table-column>
		</el-table>
		<div slot="footer" class="dialog-footer">
			<el-button size="small" @click="cancle">取 消</el-button>
			<el-button size="small" type="primary" @click="submitForm">确 定</el-button>
		</div>
	</el-dialog>
</template>
  
<script>
import { getNetwork, getNetworkDetail } from '@/api/order'
export default {
	props: {
		orderId: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			tableData: [],
			dynamicValidateForm: {
				domains: [{
					value: '',
					value1: '',
					result: '查询结果'
				}],
				name: '',
				mobile: '',
				order_id: ''
			},
			dialogVisible: false,
			result: '查询结果'
		}
	},
	watch: {
		dialogVisible(val) {
			console.log(val);
			if (val) {
				// getDetail(this.orderId).then(res => {
				// 	this.tableData = res
				// })
				this.getDetail()
			} else {
				this.$refs['ruleForm'].resetFields()
			}
		}
	},
	methods: {
		    // 手机号加密
				encryptPhoneNumber(phone) {
      const reg = /(\d{3})\d{4}(\d{4})/
      return String(phone).replace(reg, "$1****$2")
    },
		getDetail() {
			getNetworkDetail(this.orderId).then(res => {
				this.tableData = res
			})
		},
		search(item) {
			console.log(item, '333');
			if (item == 9) {
				if (this.dynamicValidateForm.name == '' || this.dynamicValidateForm.mobile == '') {
					this.$message({
						message: '请检查表单错误',
						type: 'error'
					})
				} else {
					let data = {
						cert_name: this.dynamicValidateForm.name,
						mobile: this.dynamicValidateForm.mobile,
						orderId: this.orderId
					}
					getNetwork(data).then(res => {
						this.result = res
					})
					this.getDetail()
				}
			} else {
				if (this.dynamicValidateForm.domains[item].value == '' || this.dynamicValidateForm.domains[item].value1 == '') {
					this.$message({
						message: '请检查表单错误',
						type: 'error'
					})
				} else {
					let data = {
						cert_name: this.dynamicValidateForm.domains[item].value,
						mobile: this.dynamicValidateForm.domains[item].value1,
						orderId: this.orderId
					}
					getNetwork(data).then(res => {
						this.dynamicValidateForm.domains[item].result = res
					})
					this.getDetail()
				}
			}
		},
		removeDomain(item) {
			var index = this.dynamicValidateForm.domains.indexOf(item)
			if (index !== -1) {
				this.dynamicValidateForm.domains.splice(index, 1)
			}
		},
		addDomain() {
			this.dynamicValidateForm.domains.push({
				value: '',
				result: '查询结果',
				key: Date.now()
			});
		},
		submitForm() {
			this.dynamicValidateForm.name = ''
			this.dynamicValidateForm.mobile = ""
			this.$refs['dynamicValidateForm'].resetFields();
			this.dialogVisible = false
		},
		cancle() {
			this.dynamicValidateForm.name = ''
			this.dynamicValidateForm.mobile = ""
			this.$refs['dynamicValidateForm'].resetFields();
			this.dialogVisible = false
		}
	}
}
</script>
  
<style lang="scss" scoped></style>
  